<div #slider class="x-slider" [ngClass]="classMap">
  <x-link *ngIf="showArrow" [disabled]="offset === 0" class="x-slider-arrow-left" icon="fto-chevron-left" (click)="scrollPrev()"></x-link>
  <div class="x-slider-scroll" #sliderScroll [ngClass]="scrollClassMap">
    <ul #sliderNodes [style.transform]="transform">
      <li *ngFor="let node of nodes; index as i; trackBy: trackByNode" [class.x-slider-activated]="getActivated(i)" [title]="node.label">
        <x-link (click)="nodeClick(node, i)" [ngClass]="nodeClassMap">
          <ng-container *ngTemplateOutlet="nodeTpl; context: { $node: node }"></ng-container>
          <ng-container *ngIf="!nodeTpl">
            <ng-container *xOutlet="node.label">{{ node.label }}</ng-container>
          </ng-container>
        </x-link>
      </li>
      <li class="x-slider-highlight" [class.x-slider-highlight-animated]="animated" [ngStyle]="highlightBox"></li>
    </ul>
  </div>
  <x-link
    *ngIf="showArrow"
    [disabled]="offset === maxOffset"
    class="x-slider-arrow-right"
    icon="fto-chevron-right"
    (click)="scrollNext()"
  ></x-link>
</div>
